<template>
    <div class="mainContainer">
        <div class="flexContainer" ref="flexContainer">

            <div class="courseInfo">
                <div class="introBox intro_1">
                    <img v-lazy="require('@/assets/img/teacherRes/1.png')">
                </div>
                <div class="introBox intro_2">
                    <img v-lazy="require('@/assets/img/teacherRes/2.png')">
                </div>
                <div class="introBox intro_3">
                    <img v-lazy="require('@/assets/img/teacherRes/3.png')">
                </div>
                <div class="introBox intro_4">
                    <img v-lazy="require('@/assets/img/teacherRes/4.png')">
                </div>
                <div class="introBox intro_5">
                    <img v-lazy="require('@/assets/img/teacherRes/5.png')">
                </div>
                <div class="introBox intro_6">
                    <img v-lazy="require('@/assets/img/teacherRes/6.png')">
                </div>
                <div class="introBox intro_7">
                    <img v-lazy="require('@/assets/img/teacherRes/7.png')">
                </div>
                <div class="introBox intro_8">
                    <img v-lazy="require('@/assets/img/teacherRes/8.png')">
                </div>
                <div class="introBox intro_9">
                    <img v-lazy="require('@/assets/img/teacherRes/9.png')">
                    <div class="playBox">
                        <div class="playbtn" @click="openVideo"></div>
                    </div>
                </div>
            </div>
        </div>

        <transition name="sliderRight">
            <div class="videobox" v-show="videoLayer">
                <div class="closeVideo" @click="closeVideo">关闭</div>
                <video id="myVideo" class="tvideo" :src="videoRes" preload="load" controls></video>
            </div>
        </transition>
    </div>
</template>

<script>
import videoObj from '@/assets/img/teacherRes/v_teacherRes.mp4';
export default {
    data(){
        return{
            videoLayer:false,
            srcurl:'',
            tabNo:1,
            isRocket:false,
            isLayer:false,
            msizeFont:0,
            videoRes:videoObj,
        }
    },
    mounted(){
        window.document.title = '教师资源库';
        // console.log(this.$refs['flexContainer']);
        // this.msizeFont = parseInt(getComputedStyle(window.document.documentElement)['font-size'])
        // this.$refs['flexContainer'].onscroll = this.scrollFun; //IE/Opera/Chrome 
    },
    methods:{
        openVideo(){
            this.videoLayer = true;
            // this.srcurl = 'http://pics.91118.com/flash/xuequ/Introduce.mp4';
            let videoObj = document.getElementById("myVideo");
            videoObj.play();
        },
        closeVideo(){
            this.videoLayer = false;
            let videoObj = document.getElementById("myVideo");
            videoObj.pause();
        },
        // scrollFun(e){
        //     let scrollTop = e.target.scrollTop;
        //     console.log(scrollTop,"scrollTop")
        //     if(scrollTop>500){
        //         this.isRocket = true;
        //     }else{
        //         this.isRocket = false;
        //     }


        //     if(scrollTop>=(71*this.msizeFont)){
        //         this.tabNo = 4;
        //     }else if(scrollTop>=(21.6*this.msizeFont)&&scrollTop<(71*this.msizeFont)){
        //         this.tabNo = 3;
        //     }else if(scrollTop>=(11*this.msizeFont)&&scrollTop<(21.6*this.msizeFont)){
        //         this.tabNo = 2;
        //     }else{
        //         this.tabNo = 1;
        //     }
        // },
        // gotoTab(no){
        //     this.tabNo = no;
        //     if(no==1){
        //         this.$refs['flexContainer'].scrollTop = 1
        //     }else if(no==2){
        //         this.$refs['flexContainer'].scrollTop = 11*this.msizeFont
        //     }else if(no==3){
        //         this.$refs['flexContainer'].scrollTop = 21.6*this.msizeFont 
        //     }else if(no==4){
        //         this.$refs['flexContainer'].scrollTop = 71*this.msizeFont 
                
        //     }
        // }
    }
}
</script>

<style lang='scss' scoped>
.gif1,.gif2{
    width: 5.3rem;
    height: 3.2rem;
    display: block;
    position: absolute;
}
.gif1{
    top: 6.25rem;
    left: 1.1rem;
}
.gif2{
    top: 11.12rem;
    left: 1.1rem;
}
.ewm{
    width: 100%;
    height: 2.6rem;
    text-align: center;
    margin-top: 0;
    img{
        height: 2.6rem;
        width: auto;
    }
}
.lxr{
    width: 5.6rem;
    height: 2.4rem;
    background: url(../assets/img/lxr.png) no-repeat;
    background-size: 100% 100%;
    margin: .3rem auto;
}
.lxrTit{
    width: 5.6rem;
    height: 1.5rem;
    background: url(../assets/img/lxrtit.png) no-repeat;
    background-size: 100% 100%;
    margin: .4rem auto .2rem;
}
.infoLayer{
    width: 6.26rem;
    height: 7.49rem;
    background: #FFFFFF;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 550;
    border-radius: .6rem;
    margin-top: -3.6rem;
    margin-left: -3rem;
    img{
        width: 100%;
        height: 100%;
    }
}
#myVideo{
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.playMain{
    position: fixed;
    background: #000000;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    .closeVideo{
        width: 1.2rem;
        height: .6rem;
        background: #3296FA;
        border-radius: .1rem;
        position: absolute;
        top:.2rem;
        right: .2rem;
        font-size: .24rem;
        line-height: .6rem;
        text-align: center;
        color: #FFFFFF;
    }
}
.courseInfo{
    width: 100%;
    float: left;
}
.introBox{
    position: relative;
    img{
        width: 100%;
        position: relative;
        z-index: 1;
    }
}
.intro_1{
    position: relative;
}
.playBox{
    width: 6.5rem;
    height: 3.66rem;
    position: relative;
    margin: 0 auto;
    background: url(../assets/img/teacherRes/playbg.png) no-repeat center;
    background-size: 100% 100%;
    &:after{
        content: '\20';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: .5);
        top: 0;
        left: 0;
        border-radius: .3rem;
        z-index: 50;
    }
    .playbtn{
        width: 1.2rem;
        height: 1.2rem;
        background: url(../assets/img/teacherRes/play.png) no-repeat center;
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 100;
    }
}
.videobox{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 500;
    background:#000;
    top:0;
    left: 0;
    .closeVideo{
        position: absolute;
        font-size: .3rem;
        color: #FFF;
        top: .3rem;
        right: .3rem;
        z-index: 20;
    }
    .tvideo{
        width: 100%;
        height: 100%;
    }
}
.intro_1{
    width: 100%;
    height: 7.44rem;
}
.intro_2{
    width: 100%;
    height: 5.38rem;
}
.intro_3{
    width: 100%;
    height: 9.03rem;
}
.intro_4{
    width: 100%;
    height: 9.2rem;
}
.intro_5{
    width: 100%;
    height: 6.88rem;
}
.intro_6{
    width: 100%;
    height: 6.91rem;
}
.intro_7{
    width: 100%;
    height: 8.53rem;
}
.intro_8{
    width: 100%;
    height: 9.8rem;
}
.intro_8{
    width: 100%;
}

.mainContainer{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FFF;
}
.flexContainer{
    width: 100%;
    height: 100%;
    overflow: auto;;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

    
</style>